<template>
	<view id="engineer">
		<view class="eng-item">
			<view class="engineer-tit">{{ projectDetail.projectName }}</view>
			<view class="engineer-detail">
				<u-row customStyle="margin-bottom: 10px">
						<u-col span="3">
							<image class="projectPicture"  src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/static/images/1.jpg" mode="aspectFill"></image>
						</u-col>
						<u-col span="9">
							<view class="eng-info">工程信息</view>
							<view class="eng-det">
								<view class="item-det">
									<text class="item-text">负责人：</text>
									<text v-if="projectDetail.constructorContacts == null" class="item-num">--</text>
									<text v-else class="item-num">{{projectDetail.constructorContacts}}</text>
								</view>
								<view class="item-map">
									<view class="item-det">
										<text class="item-text">工程地址：</text>
										<text v-if="projectDetail.projectAddress == null" class="item-num">--</text>
										<text v-else class="item-num">{{projectDetail.projectAddress}}</text>
									</view>
									<view>
										<u-icon name="map" color="#00a8ff" size="22" @click="goMap"></u-icon>
									</view>
								</view>
							</view>
						</u-col>
				</u-row>
			</view>
		</view>
		<u-gap height="8" bgColor="#f5f6fa"></u-gap>
		<view class="eng-item">
			<u-cell-group :border="false">
				<text class="title-text">工程进度</text>
				<view  class="step">
					<u-steps current="0" dot>
						<u-steps-item title="桩基"></u-steps-item>
						<u-steps-item title="主体"></u-steps-item>
						<u-steps-item title="装饰"></u-steps-item>
						<u-steps-item title="竣工"></u-steps-item>
						<u-steps-item title="完成"></u-steps-item>
					</u-steps>
				</view>
			</u-cell-group>
		</view>
		<u-gap height="8" bgColor="#f5f6fa"></u-gap>
		<view class="eng-item">
			<u-cell-group :border="false">
				<u-cell class="title-text" title="智慧监测"></u-cell>
				<view class="gk">
					<u-grid col="4" @click="onGridEnv">
						<u-grid-item>
							<view class="item-image">
								<image src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zszd.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">扬尘管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/warn_zs.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">噪声管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/soil_icon.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">裸土覆盖</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/wash_icon.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">车辆冲洗</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/spgk.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">视频管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/ycgk.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">喷淋联动</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/gjxx.png" mode="aspectFill"></image>
							</view>
							<text class="grid-text">告警管控</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
		<u-gap height="8" bgColor="#f5f6fa"></u-gap>
		<view class="eng-item">
			<u-cell-group :border="false">
				<u-cell class="title-text" title="移动办公"></u-cell>
				<view class="gk">
					<u-grid col="4" @click="onGridMove">
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zxjc.png"
									width="40" height="40" mode="aspectFill"></image>
							</view>
							<text class="grid-text">上级交办</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/spgk.png"
									width="40" height="40" mode="aspectFill"></image>
							</view>
							<text class="grid-text">项目自查</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image lazyLoad :showLoading="true"
									src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zxjc.png"
									width="40" height="40" mode="aspectFill"></image>
							</view>
							<text class="grid-text">问题整改</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
	</view>	
</template>

<script>
	import { detailProject } from '@/api/global'
	export default {
		data() {
			return {
				projectId: '',
				projectDetail: {}
			}
		},
		onLoad (option) {
			this.projectId = option.projectId
		},
		onShow () {
			this.getDetail(this.projectId)
		},
		methods: {
			getDetail (projectId) {
				detailProject(projectId).then(res => {
					this.projectDetail = res.data.data
				})
			},
			goMap() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						const latitude = Number(this.projectDetail.latitude)
						const longitude = Number(this.projectDetail.longitude)
						console.log(latitude,longitude)
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: res => {
								console.log(res)
							}
						})
					}
				})
			},
			onGridEnv (name) {
				if (name === 0) {
					uni.navigateTo({
						url: `../map-dust-control/map-dust-control?projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 1) {
					uni.navigateTo({
						url: `../map-noise-control/map-noise-control?projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 2) {
					uni.navigateTo({
						url: `../map-soil/map-soil?projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 3) {
					uni.navigateTo({
						url: `../map-wash/map-wash?projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 4) {
					uni.navigateTo({
						url: `/packageB/video/videobypro?projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 5) {
					uni.navigateTo({
						url: '../packageC/site-list/sitelist?name=' + '喷淋联动'
					})
				}
				if (name === 6) {
					uni.navigateTo({
						url: '../warn/warn?name=' + '告警管控'
					})
				}
			},
			onGridMove (name) {
				if (name === 0) {
					uni.navigateTo({
						url: `../map-assigned-by-superior/map-assigned-by-superior?projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 1) {
					uni.navigateTo({
						url: `../project-self-inspection/project-self-inspection?&projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
				if (name === 2) {
					uni.navigateTo({
						url: `../project-self-inspection/project-self-inspection?&projectId=${this.projectId}&projectName=${this.projectDetail.projectName}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	#engineer{
		height: 100vh;
		padding: 0 20upx;
		background-color: #f5f6fa;
		.circle-bar {
			width: 100%;
			height: 400upx;
			padding: 1% 2%;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.u-grid {
			margin-bottom: 40upx;
			.u-grid-item {
				padding-top: 40upx;
			}
		}
		.u-cell__title-text {
		  font-weight: bold;
		}
		.engineer-detail {
			padding: 0 20upx;
			.projectPicture {
				height: 140upx;
				width: 140upx;
				
			}
		}
		.eng-item {
			background-color: #ffffff;
			.title-text {
				display: block;
				font-size: 30upx;
				font-weight: bold;
				margin-top: 26upx;
				margin-left: 26upx;
			}
			.gk {
				.item-image {
					image {
						height: 80upx;
						width: 80upx;
					}
				}
			}
			.step {
				margin: 20upx 10upx;
			}
		}
		.engineer-tit {
			position: relative;
			text-align: center;
			font-weight: bold;
			font-size: 26upx;
			margin-top: 10upx;
			.u-icon__icon {
				position: absolute;
				left: 50%;
				top: 7upx !important;
				margin-left: 74upx;
			}
		}
		.eng-info {
			font-size: 34upx;
			padding-bottom: 6upx;
		}
		.eng-tit {
			font-size: 28upx;
			padding: 10upx 0;
		}
		.eng-det {
			.item-map {
				display: flex;
				justify-content: space-between;
			}
			.item-det {
				padding: 4upx 0;
			}
				.item-num {
					font-size: 24upx;
					color: darkgray;
					padding: 0 6upx;
				}
		}
	}
</style>